<template>
  <div id="home_body">
    <ul class="body_left">
      <li v-for="item of navList" :key="item.title">
        <a :href="item.navUrl">《{{item.title}}》</a>
      </li>
    </ul>
    <el-carousel class="lunbo" indicator-position="outside" trigger="click">
      <el-carousel-item
          class="lunbo_item"
          v-for="item in lunboList"
          :key="item">
        <div class="lunbo_item" :style="{backgroundImage:`url(${item})`}"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "HomeBody",
  data(){
    return{
      lunboList:[
          "http://img63.ddimg.cn/cuxiao/495bb1900-595-.jpg",
          "http://img61.ddimg.cn/upload_img/00684/zn_yf/1920400dd-1636702633.jpg",
      ],
      navList:[
        {title:"西游记",navUrl:"http://product.dangdang.com/23845428.html"},
        {title:"法治的细节",navUrl:"http://product.dangdang.com/29323524.html"},
        {title:"孩子，你可以更勇敢",navUrl:"http://product.dangdang.com/29118673.html"},
        {title:"韩语传",navUrl:"http://product.dangdang.com/29251225.html"},
        {title:"看你一眼就会笑",navUrl:"http://product.dangdang.com/29273151.html"},
      ],
    }
  }
}
</script>

<style scoped>
#home_body{
  display: flex;
  height: 330px;
}
/*侧边导航栏*/
.body_left{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 400px;
  height: 100%;
  overflow: hidden;
  list-style: none;
  background: #eee;
}
.body_left li{
  height: 100%;
  padding-left: 20px;
  padding-top: 13px;
  cursor: default;
}
.body_left li a{
  display: block;
  color: #000;
  font-size: 18px;
  text-decoration: none;
  line-height: 40px;
}
.body_left li:hover{
  background: #ccc;
}
.lunbo{
  flex: 1;

}
.lunbo_item{
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
</style>
